<template>
  <view class="pd24_20">
    <view v-if="isLogin == false" @click="showLoginAct" class="flex alcenter space">
      <view class="flex alcenter">
        <view class="member-face">
          <image class="face" :src="statics.defaultFace"></image>
        </view>
        <view class="ml15">
          <view class="ft16 cl-main">{{$t("member.nologin")}}</view>
          <view class="mt12 ft12 cl-notice">{{$t("member.nologin.tips")}}</view>
        </view>
      </view>
      <text class="iconfont iconicon_arrow_small ft12 cl-notice"></text>
    </view>
    <view v-else class="flex alcenter space">
      <view class="flex alcenter" @click="openSettingProfilePage">
        <view class="member-face">
          <image class="face" :src="avatar"></image>
          <image class="vip-level" :src="userinfo.group_id>1?statics.vipLevelImg[0]:''"></image>
        </view>
        <view class="ml15">
          <view class="ft16 cl-main">{{ userinfo.nickname || '' }}</view>
          <view class="mt12 ft12 cl-notice">ID:{{ userinfo.user_id || '' }}</view>
        </view>
      </view>
      <view class="btn-mini opsetads" @click="openSettingPage">
        <image mode="aspectFit" style="width: 100%; height: 100%;" :src="staticUrl + 'sz.png?v=1'">
      </view>
    </view>
    <home-vipcard :userinfo="userinfo" @loginAct="showLoginAct" @qrcode="showQrcode = true"></home-vipcard>
    <home-banner :banners="banners"></home-banner>
    <view class="flex wrap space mt16">
      <view v-for="(item,index) in getMenus" :key="index" :class="index > 1 ? 'mt16': ''">
        <view v-if="item.type == 'link'" :data-index="index" @click="memberLinkTo" class="box pd16_15 flex alcenter"
          style="width: 320rpx;">
          <image :src="item.icon" style="width: 64rpx;height: 64rpx;"></image>
          <text class="ml15 ft14 ftw500 cl-main">{{item.name}}</text>
        </view>
        <view v-else style="width: 320rpx;">
          <button class="box pd16_15 flex alcenter" :open-type="item.type" style="padding: 32rpx 30rpx; margin: 0;">
            <image :src="item.icon" style="width: 64rpx;height: 64rpx;"></image>
            <text class="ml15 ft14 ftw500 cl-main">{{item.name}}</text>
          </button>
        </view>
      </view>
      
      <!-- <view class="mt16" style="width: 100%;">
        <view class="box pd16_15 flex alcenter">
          <image src="../../../static/icon/member_mail.png" style="width: 64rpx;height: 64rpx;"></image>
          <navigator url="/pages/contact"><text class="ml15 ft14 ftw500 cl-main">Contact us:<text class="ft14" style="font-weight: 400;margin-left: 10rpx;">service@wewin.work</text></text></navigator>
        </view>
      </view> -->
      
    </view>

    <!-- <com-copyright></com-copyright> -->

    <!-- <com-footer model="member"></com-footer> -->

    <dialog-login v-if="showLogin" @loginYes="loginYes" @closed="showLogin = false"></dialog-login>
    <dialog-qrcode v-if="showQrcode" @closed="showQrcode = false"></dialog-qrcode>
  </view>
</template>

<script>
  import {
    isOnLineApp
  } from '@/utils/ua'
  export default {
    data() {
      return {
        isLogin: false,
        showLogin: false,
        isBirthday: true,
        showQrcode: false,
        avatar: '',
        userinfo: [],
        banners: [],
        vipLevel: 0,
        iskq: 0,
        uid: 0,
        staticUrl: this.$config.staticUrl,
        memberMenus: [{
            name: this.$t("member.menus.history"),
            type: 'link',
            needLogin: true,
            model: '',
            link: '/pages/client/tuan/watched',
            icon: this.$config.staticUrl + 'vipcard_icon_my_card@2x.png',
            show: 1
          },
          {
            name: this.$t("member.menus.zui"),
            type: 'link',
            needLogin: true,
            model: '',
            link: '/pages/client/tuan/follow',
            icon: this.$config.staticUrl + 'vipcard_icon_my_order@2x.png',
            show: 1
          },
          {
            name: this.$t("member.menus.mylove"),
            type: 'link',
            needLogin: true,
            model: '',
            link: '/pages/client/tuan/favorite',
            icon: this.$config.staticUrl + 'vipcard_love.png?v=1',
            show: 1
          },
          // {
          //   name: this.$t("about.title"),
          //   type: 'link',
          //   needLogin: false,
          //   model: '',
          //   link: '/pages/about',
          //   icon: this.$config.staticUrl + 'vipcard_icon_my_contact@2x.png',
          //   show: 1
          // },
          {
            name: this.$t("contact.title"),
            type: 'link',
            needLogin: false,
            model: '',
            link: '/pages/contact',
            icon: '../../../static/icon/member_mail.png',
            show: 1
          },
          // {
          //   name: 'Refund policy',
          //   type: 'link',
          //   needLogin: false,
          //   model: '',
          //   link: '/pages/policy/refund',
          //   icon: this.$config.staticUrl + 'vipcard_icon_my_integral@2x.png',
          //   show: 1
          // },
          {
            name: 'Privacy policy',
            type: 'link',
            needLogin: false,
            model: '',
            link: '/pages/policy/privacy',
            icon: this.$config.staticUrl + 'vipcard_icon_my_advise@2x.png',
            show: 1
          },
        ],
      }
    },
    computed: {
      getMenus() {
        let arr = new Array;
        for (var a in this.memberMenus) {
          if (this.memberMenus[a].show == 1 || (this.iskq == 1 && this.memberMenus[a].show == 3)) {
            arr.push(this.memberMenus[a]);
          }
        }
        return arr;
      },
      isOnLine() {
        return isOnLineApp()
      }
    },
    onLoad() {
      if (uni.getStorageSync("userinfo")) {
        this.uid = uni.getStorageSync("userinfo").id
      }
    },
    onShow() {
      if (uni.getStorageSync("userinfo").token) {
        this.isLogin = true;
        this.ongrzlTap();
      } else {
        this.isLogin = false;
      }
      this.banners = uni.getStorageSync("config").banner
      this.getList();
    },
    methods: {
      openSettingPage() {
        uni.navigateTo({
          url: '/pages/setting/index'
        })
      },
      openSettingProfilePage() {
        uni.navigateTo({
          url: '/pages/setting/profile/index'
        })
      },
      goFollow() {
        this.GAHandle('c_link_line', 1)
        setTimeout(()=>{
          location.href = this.configs.lineHomeLink
        }, 800)
      },
      async ongrzlTap() {
        let data = {};
        data.token = uni.getStorageSync("userinfo").token;
        data.uid = uni.getStorageSync("userinfo").id;
        uni.request({
          url: this.configs.apiUrl + '/api/user/index',
          data: data,
          success: res => {
            if (res.data.code == 1) {
              let ionfo = res.data.data
              ionfo.isLogin = true
              this.userinfo = ionfo
              this.iskq = this.userinfo.config.iskq
              uni.setStorage({ //缓存配置信息
                key: 'userinfo',
                data: res.data.data
              })
              if (res.data.data.avatar) {
                var str = res.data.data.avatar;
                if (str.indexOf("data:image") != -1) {
                  this.avatar = '';
                } else {
                  if (str.indexOf("http") != -1) {
                    this.avatar = res.data.data.avatar;
                  } else {
                    this.avatar = this.configs.imgUrl + res.data.data.avatar;
                  }
                }
              } else {
                this.avatar = '';
              }
              uni.setStorage({ //缓存配置信息
                key: 'avatar',
                data: this.avatar
              })
            } else {
              if (res.data.code == 401) {
                uni.removeStorageSync('userinfo');
                location.reload()
                return;
              }
              uni.showToast({
                title: res.data.msg,
                icon: "none"
              });
            }
          },
          fail: (data, code) => {
            //console.log('fail' + JSON.stringify(data));
          }
        });
      },
      getList() {
        let data = {};
        var limit = 15;
        data.limit = limit
        data.ishot = 2
        uni.request({
          url: this.configs.apiUrl + '/api/video/lists',
          data: data,
          success: data => {
            //console.log(data.data)
            uni.setStorage({ //缓存配置信息
              key: 'config',
              data: data.data.config
            })
            if (uni.getStorageSync("config").iskq) {
              this.iskq = uni.getStorageSync("config").iskq;
            }
          },
          fail: (data, code) => {}
        });
      },
      memberLinkTo(e) {
        let index = parseInt(e.currentTarget.dataset.index);
        const _currentMenu = this.getMenus[index];
        const {
          model,
          link,
          needLogin
        } = _currentMenu;
        if (this.isLogin == false && model != 'integral' && needLogin) {
          this.showLogin = true;
        } else {
          if (link != '') {
            if (model == 'integral') {
              uni.redirectTo({
                url: link
              })
            } else if (model == 'outlink') {
              location.href = link
            } else {
              uni.navigateTo({
                url: link
              })
            }
          }
        }
      },
      birthdayAct() {
        if (this.isBirthday) {
          uni.navigateTo({
            url: '/pages/client/member/birthday'
          })
        } else {
          uni.navigateTo({
            url: '/pages/client/member/info'
          })
        }
      },
      showLoginAct() {
        uni.navigateTo({
          url: '/pages/login/login'
        })
      },
      loginYes() {

      },
      outlogin() {
        uni.showModal({
          content: this.$t("login.logout.comfrim"),
          success: (e) => {
            if (e.confirm) {
              uni.clearStorageSync();

              setTimeout(() => {
                this.isLogin = false;
                this.userinfo.isLogin = false
              }, 200)
            }
          }
        });
      }
    }
  }
</script>

<style>
  .opsetads {
    background: #FFFFFF;
    color: #000000;
    width: 70upx;
    line-height: 70upx;
    height: 70upx;
    text-align: center;
    border-radius: 100%;
    animation: rotate 10s linear infinite;
  }

  @keyframes rotate {
    0% {
      transform: rotate(0deg) skew(0deg) scale(1);
      -ms-transform: rotate(0deg) skew(0deg) scale(1);
      /* IE 9 */
      -moz-transform: rotate(0deg) skew(0deg) scale(1);
      /* Firefox */
      -webkit-transform: rotate(0deg) skew(0deg) scale(1);
      /* Safari  Chrome */
      -o-transform: rotate(0deg) skew(0deg) scale(1);
    }

    100% {
      transform: rotate(360deg) skew(0deg) scale(1);
      -ms-transform: rotate(360deg) skew(0deg) scale(1);
      /* IE 9 */
      -moz-transform: rotate(360deg) skew(0deg) scale(1);
      /* Firefox */
      -webkit-transform: rotate(360deg) skew(0deg) scale(1);
      /* Safari  Chrome */
      -o-transform: rotate(360deg) skew(0deg) scale(1);
    }
  }

  .member-face {
    position: relative;
  }

  .member-face .vip-level {
    height: 48rpx;
    width: 48rpx;
    position: absolute;
    left: calc(50% - 24rpx);
    top: -30rpx;
  }

  .member-face .face {
    width: 160rpx;
    height: 160rpx;
    border: 6rpx solid #FFFFFF;
    background: #FFFFFF;
    border-radius: 100rpx;
    box-shadow: 0rpx 24rpx 48rpx 0rpx rgba(197, 202, 219, 0.3);
  }

  .miniapp-icon {
    width: 48rpx;
    height: 48rpx;
    border-radius: 24rpx;
    background: #F2F2F2;
  }

  
</style>